<template>
  <div class="editInfo">
    <EditHead />
    <div class="infoList">
      <div class="list-item">
        <div class="list_l"> 头像</div>
        <div class="list_r">
          <div class="head-warp">
            <img :src="getHead">
          </div>
          <div class="btn"
               @click="isLoadHead = true">
            更换
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="list_l"> 昵称</div>
        <div class="list_r"> {{getUserData.nickname}}</div>
      </div>
      <div class="list-item">
        <div class="list_l"> 注册时间</div>
        <div class="list_r"> 2020年7月8日14:45:11</div>
      </div>
      <div class="list-item">
        <div class="list_l"> 个性签名</div>
        <div class="list_r">

          <div ref="desc_warp"
               :contenteditable="isEmitDesc">
            {{getUserData.desc}}
          </div>

        </div>
      </div>
      <div class="list-item">
        <div class="list_l"> 余额</div>
        <div class="list_r">
          <div>
            {{getUserData.money}}
          </div>
          <div class="btn"
               @click="istopUp = true">
            充值
          </div>
        </div>
      </div>
      <div class="list-item">
        <div class="list_l"> 地址</div>
        <div class="list_r">
          <div>
            {{getUserData.address}}
          </div>

        </div>
      </div>
    </div>

    <!-- 充值组件 -->

    <Popup :show="istopUp"
           close
           @close="istopUp = false"
           :tit="'充值'">

      <div class="upTop-warp">
        <div>
          <Input v-model="topUpValue"
                 prefix="logo-usd"
                 placeholder="输入充值金额"
                 style="width: 130px" />
        </div>
        <button @click="upTopClick"
                class="btn">充值</button>
      </div>
    </Popup>
    <Popup :show="isLoadHead"
           tit="上传头像"
           close
           @close="isLoadHead = false">
      <div class="uploadHead-warp">
        <div class="loadImg-warp">
          <img :src="imgSrc">
        </div>
        <div class="btn-warp">
          <Button type="info"
                  @click="uploadHeadImg">选择</Button>
          <Button icon="ios-cloud-upload-outline"
                  style="margin-left: 10px;"
                  @click="uploadsubmit">上传</Button>
        </div>

        <input type="file"
               style="display:none"
               ref="fileInp"
               @change="uploadSuccess">
      </div>

    </Popup>
  </div>
</template>

<script>
import { default_head } from 'common/config.js'
import { headUpload, userTopUp } from 'server/front_k.js'
import { mapGetters } from 'vuex'
import EditHead from './comps/EditHead.vue'



export default {
  computed: {
    ...mapGetters(['getUserData']),
    getHead() {
      return this.getUserData.head || default_head
    }
  },
  data() {
    return {
      isEmitDesc: false,
      istopUp: false,
      topUpValue: 0,
      isLoadHead: false,
      imgSrc: '',
      imgFile:null
    }
  },
  methods: {
    uploadHeadImg() {
      let fileInp = this.$refs.fileInp
      fileInp.click()
    },
    uploadSuccess() {
      let file = this.$refs.fileInp.files[0]
      if (!this.$file.img(file.type)) {
        // this.$refs.fileInp.files[0] = ''
        return this.$Message.error('文件格式不符')
      }
      this.imgFile = this.$refs.fileInp.files[0]


      let _this = this
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = function(e) {
        _this.imgSrc = this.result
      }
    },
    uploadsubmit() {
      if (!this.imgFile) {
        return this.$Message.error('请先选择文件')
        
      }

      let fromData = new FormData()
      fromData.append('image', this.imgFile)

      headUpload(fromData).then(res => {
    
        this.isLoadHead = false 
        this.imgFile = null
        if (res.err_code == 1000) {
          this.$Message.success('上传成功！')
          this.$show.$emit('getLogin');
          return
        }
        this.$Message.error('上传失败，服务器繁忙')
      })
    },
    // 编辑用户信息
    emitDesc() {
      this.isEmitDesc = true
    },
    upTopClick() {
      if (!this.$rex.money(this.topUpValue) || this.topUpValue <= 0) {
        return this.$Message.error('格式输入错误了，白嫖请严肃一点')
      }

      let money = {
        money: parseInt(this.topUpValue)
      }

      userTopUp(money).then(res => {
        this.istopUp = false
        this.topUpValue = 0
        if ((res.err_code = 1000)) {
          this.$show.$emit('getLogin')
          return this.$Message.success(`充值成功，金币增加+${money.money}`)
        }
        this.$Message.error(res.message)
      })
    }
  },
  components: {
    EditHead
  },
  created(){
    this.imgSrc = this.getUserData.head || default_head
    
  }

}
</script>

<style scoped>
.editInfo {
  padding: 20px;
}

.list-item {
  display: flex;
  min-height: 80px;
}
.list_l {
  width: 120px;
  /* border: #dee0e1 1px solid; */
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
}
.list_r {
  flex: 1;
  /* border: #dee0e1 1px solid; */
  display: flex;
  align-items: center;
  margin: 10px 0;
  justify-content: space-between;
}
.head-warp {
  width: 80px;
  height: 80x;
}
.head-warp img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
.list_r .btn {
  margin-left: 20px;
  float: right;
  background-color: #3e3f1d;
}
.upTop-warp {
  /* display: flex; */
  text-align: center;
  margin-top: 20px;
  /* paint-order: ; */
  padding-top: 30px;
}
.upTop-warp .btn {
  margin-top: 30px;
}
.uploadHead-warp {
  width: 400px;
  padding: 30px;
}
.loadImg-warp {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  border: 1px solid #ccc;
}
.loadImg-warp img {
  height: 100%;
  width: 100%;
}
.uploadHead-warp .btn-warp {
  text-align: center;
}
</style>